<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/list.css">
    <style>
        .apl {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff; /* 设置背景颜色，如果需要的话 */
            /* 其他样式属性，例如 padding、border 等 */
        }
    </style>
</head>
<body>
    <div id="nav" class="w-75 m-auto"></div>
    <div class="container-fluid w-75 m-auto" id="albumDetailApp" style="height: 150vh">
        <div class="media mt-5">
            <img :src="'/music_platform'+album.pic" class="mr-3" alt="..." style="width: 250px;height: 250px;border:solid #0f0f0f;">
            <div class="media-body">
                <h4 class="mt-0">{{album.aname}}</h4>
                <div class="btn-group" role="group">
                    <span v-if="album.ablumFavoriteStatus===0"><button class="btn btn-danger btn-sm" @click="collectAlbum">收藏</button></span>
                    <span v-else>
                        <template>
                            <el-popconfirm
                                    title="确定取消收藏？"
                                    @confirm="unCollectAlbum"
                            >
                                <el-button slot="reference" size="small">已收藏</el-button>
                            </el-popconfirm>
                        </template>
                    </span>
                    <span class="ml-2 mt-1">(已收藏：{{collectNum}})</span>
                    <!--            <button type="button" class="btn btn-danger btn-sm ml-5">播放</button>-->
                </div>
                <p class="mt-5"><a class="text-decoration-none text-dark" :href="'/music_platform/pages/singer_detail.html?sid='+album.singer.sid">歌手：{{album.singer.sname}}</a></p>
                <p>时间：{{album.publishTimeStr}}</p>
                <div><span class="ml-2 text-info" v-for="item in album.categorys" class="mt-2">{{item.cname}}</span></div>
            </div>
        </div>
        <div class="col-md-9" style="margin-top: 20px">
            <el-tabs v-model="activeName">
                <el-tab-pane label="歌曲列表" name="first">
                    <table class="table">
                        <thead>
                        <td></td>
                        <td><h5>歌曲名</h5></td>
                        <td><h5>歌手</h5></td>
                        <td><h5>专辑</h5></td>
                        </thead>
                        <tr class="border" v-for="(song,index) in songs">
                            <td>{{index+1}}</td>
                            <td><a class="text-decoration-none text-dark" :href="'/music_platform/pages/song_detail.html?mid='+song.mid">{{song.mname}}</a></td>
                            <td><a class="text-decoration-none text-dark" :href="'/music_platform/pages/singer_detail.html?sid='+album.singer.sid">{{album.singer.sname}}</a></td>
                            <td><a class="text-decoration-none text-dark" :href="'/music_platform/pages/album_detail.html?sid='+album.alid">{{album.aname}}</a></td>
<!--                            <td><button type="button" class="btn btn-primary btn-sm">播放</button></td>-->
                            <td>
                                <span v-if="song.favoriteStatus===0">
                                <el-button type="primary" @click="preFavoriteSong(song.mid)" size="small">收藏</el-button>
                                </span>
                                <span v-else>
                                    <el-button slot="reference" size="small" @click="unfavorite">已收藏</el-button>
                                </span>
                                <span>
                                    <el-button @click="playSong(song.mid)" type="warning" size="small">播放</el-button>
                                </span>
                                <span>
                                    <a :href="'/music_platform/download?id='+song.mid" class="song-info">
                                        <i class="fas fa-download"></i>
                                    </a>
                                </span>
                            </td>
                        </tr>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="专辑详情" name="second">
                    <div>
                        <p>&emsp;&emsp;{{album.desc}}</p>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-dialog title="收藏"
                       :visible.sync="dialogFormVisible"
                       width="50%">
                <template>
                    <el-tabs v-model="activeName2">
                        <el-tab-pane label="选择歌单" name="first">
                            <el-select v-model="playListChosed" filterable placeholder="请选择">
                                <el-option
                                        v-for="(item,index) in userPlayList"
                                        :key="index"
                                        :label="item.plname"
                                        :value="item.plid">
                                </el-option>
                            </el-select>
                            <el-button key="btn1" size="small" @click="dialogFormVisible = false">取 消</el-button>
                            <el-button key="btn2" type="primary"  size="small" @click="addFavorite">确 认</el-button>
                        </el-tab-pane>
                        <el-tab-pane label="创建新歌单" name="second">
                            <el-input placeholder="请输入歌单名" v-model="UserCreatePlayListName"></el-input>
                            <el-button key="btn3" size="small" @click="dialogFormVisible = false">取 消</el-button>
                            <el-button v-if="UserCreatePlayListName!==''" key="btn4" type="primary"  size="small" @click="addFavoriteToNew">确 认</el-button>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </el-dialog>
        </div>
        <div class="apl">
            <aplayer autoplay
                     :music="{
                title: this.audio.title,
                artist: this.audio.artist,
                src: this.audio.src,
                pic: this.audio.pic,
                lrc: this.audio.lrc
            }" :float="true" :showLrc="true" :mutex="true" :listMaxHeight="'70px'":listFolded="true"
                     :list=this.list     />
        </div>

        <button @click="togglePlaylist" class="list-toggle-button">播放列表</button>
        <div @mouseleave="listOut" class="list-playlist-container" :class="{ 'show-playlist': isPlaylistOpen }">
            <!-- 清空按钮 -->
            <button @click="clearPlaylist" class="clear-playlist-button">一键清空</button>

            <!-- 播放列表信息 -->
            <div class="playlist-info">
                <p>播放列表信息:</p>
                <p>歌曲数量: {{ list.length }}</p>
                <!-- 可以添加其他相关信息 -->
            </div>
            <!-- 歌曲列表 -->
            <div class="list-song-list">
                <!-- 歌曲条目 -->
                <div v-for="(song,index) in list" :key="song.id" class="list-song-item">
                    <div class="list-song-info">
                        <strong class="song-info">{{ index + 1 }}. {{ song.title }} - {{ song.artist }}</strong>
                    </div>
                    <div class="list-delete-button" @click="removeSong(song.id)">删除</div>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/newnav.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入 Vue-APlayer -->
    <script src="js/vue-aplayer.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/getParameter.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let albumDetailApp = new Vue({
            el:"#albumDetailApp",
            data:{
                activeName: 'first',
                activeName2: 'first',
                album:{
                    singer:{
                        sname:'',
                    }
                },
                songs:[],
                dialogFormVisible:false,
                UserCreatePlayListName:'',
                playListChosed:'',
                userPlayList:[-1],
                songSelectedSid:'',
                collectNum:'',
                audio: {
                    title:'无歌曲',
                    artist: '无歌曲',
                    src: '',
                    pic: '/music_platform/img/R-C.png',
                    lrc:''
                },
                list:[],
                isPlaylistOpen: false,
            },
            methods:{
                async playSong(mid){
                    let _this = this;
                    await axios.get("/music_platform/singleSong/"+mid).then(function (response){
                        _this.audio.title = response.data.data.mname;
                        _this.audio.artist = response.data.data.singer.sname;
                        _this.audio.pic = "/music_platform"+response.data.data.pic;
                        _this.audio.lrc = response.data.data.lyc;
                        _this.audio.src = "/music_platform"+response.data.data.source;
                    })
                    this.addAudio();
                },
                loadAlbumDetail:function (){
                    let alid = getParameter("alid");
                    let _this = this;
                    axios.get("/music_platform/album/"+alid).then(function (response){
                        _this.album = response.data.data;
                        _this.songs = response.data.data.songs;
                    })
                },
                loadUserHasPlayList:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/findByUid").then(function (response){
                        if (response.data.flag == true){
                            _this.userPlayList = response.data.data;
                        }
                    })
                },
                unfavorite:function (val){
                    let _this = this;
                    axios.get("/music_platform/playlist/unFavorite",{
                        params:{
                            mid:val
                        }
                    }).then(function (response){
                        _this.loadAlbumDetail();
                    })
                },
                addFavorite:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/addFavorite",{
                        params:{
                            mid:_this.songSelectedSid,
                            plid:_this.playListChosed
                        }
                    }).then(function (response){
                        _this.loadAlbumDetail();
                        _this.dialogFormVisible=false;
                    })
                },
                addFavoriteToNew:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/addFavoriteToNew",{
                        params:{
                            mid:_this.songSelectedSid,
                            plname:_this.UserCreatePlayListName
                        }
                    }).then(function (response){
                        _this.loadAlbumDetail();
                        _this.loadUserHasPlayList();
                        _this.dialogFormVisible=false;
                    })
                },
                collectAlbum:function (){
                    let _this = this;
                    axios.get("/music_platform/album/addFavoriteAlbum",{
                        params:{
                            alid:_this.album.alid,
                        }
                    }).then(function (response){
                        if (response.data.flag===false){
                            location.href = "/music_platform/pages/login.html"
                        }
                        _this.loadAlbumDetail();
                        _this.findCollectCount();
                    })
                },
                unCollectAlbum:function (){
                    let _this = this;
                    axios.get("/music_platform/album/removeFavoriteAlbum",{
                        params:{
                            alid:_this.album.alid,
                        }
                    }).then(function (response){
                        _this.loadAlbumDetail();
                        _this.findCollectCount();
                    })
                },
                findCollectCount:function (){
                    let alid = getParameter("alid");
                    let _this = this;
                    axios.get("/music_platform/album/findCollectCount",{
                        params:{
                            alid:alid,
                        }
                    }).then(function (response){
                        _this.collectNum = response.data.data;
                    })
                },
                preFavoriteSong:function (val){
                    if (this.userPlayList[0]===-1){
                        location.href = "/music_platform/pages/login.html"
                    }else {
                        this.dialogFormVisible = true;
                        this.songSelectedSid=val;
                    }
                },
                addAudio(){
                    if (!this.list.some(item => item.title === this.audio.title &&
                        item.artist === this.audio.artist)){
                        const audioCopy = { ...this.audio };
                        this.list.push(audioCopy);
                        // 更新数据后将数据保存到localStorage
                        localStorage.setItem('myList', JSON.stringify(this.list));
                    }
                },
                removeSong(index) {
                    // 在这里实现删除歌曲的逻辑
                    this.list.splice(index, 1);
                    localStorage.setItem('myList', JSON.stringify(this.list));
                },
                togglePlaylist() {
                    this.isPlaylistOpen = !this.isPlaylistOpen;
                },
                listOut(){
                    this.isPlaylistOpen = false;
                },
                clearPlaylist(){
                    this.list = []
                }
            },
            created:function (){
                this.loadAlbumDetail();
                this.loadUserHasPlayList();
                this.findCollectCount();
            },
            components: {
                Aplayer: window.VueAPlayer  // 注册Vue-APlayer组件
            },
            mounted:function (){
                // 在Vue实例初始化后，尝试从localStorage获取数据
                var storedList = localStorage.getItem('myList');
                if (storedList) {
                    // 如果本地存储中有数据，将其解析并赋值给Vue的数据
                    this.list = JSON.parse(storedList);
                }
            },
            beforeDestroy() {
                localStorage.setItem('myList', JSON.stringify(this.list));
            }
        })
    </script>
</body>
</html>